<template>
        <div class="goodsEntry">
            <div style="padding:20px">
                <el-button type="primary" @click="returnOver">返回</el-button>
            </div>
            <el-form :inline="true" style="padding: 20px">
                <el-form-item label="入库时间：">
                    <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    
                    v-model="endtime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="关键字搜索：">
              <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入商品名称,商品ID" size="medium"></el-input>
                  
                </el-form-item>
                <el-form-item label="仓库全部：">
                    <el-select v-model="queryData.storeId" size="medium">
                        <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                      </el-select>
                </el-form-item>
                <el-form-item label="入库类型：">
                    <el-select v-model="queryData.inType" size="medium">
                        <el-option value="0" label="新酒入库"></el-option>
                        <el-option value="1" label="转让入库"></el-option>
                        <el-option value="2" label="报溢入库"></el-option>
                    </el-select>
                    
                </el-form-item>
               
                <el-form-item label="">
                    <el-button type="primary" size="medium" @click="query">查询</el-button>
                    <el-button type="primary" size="medium" @click="exportData">导出</el-button>
                    
                </el-form-item>
                
            </el-form>
         <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border>
                <el-table-column
                type="index"
                width="50">
              </el-table-column>
            
              <el-table-column align="center" prop="create_time" label="入库时间">
              </el-table-column>
              <el-table-column align="center" prop="goods_id" label="商品ID">
              </el-table-column>
              <el-table-column align="center" prop="inType" label="入库类型">
              </el-table-column>
              <el-table-column align="center" prop="area_name" label="存放位置">
              </el-table-column>
              <el-table-column align="center" prop="sku_no" label="SKU编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_id" label="商品编号">
              </el-table-column>
              <el-table-column align="center" prop="goods_name" label="商品名称">
                </el-table-column>
             <el-table-column align="center" prop="goods_kind_first" label="商品类别">
              </el-table-column>
              
              <el-table-column align="center" prop="product_time" label="生产时间">
              </el-table-column>
              <el-table-column align="center" prop="wineYear" label="年份">
              </el-table-column>
              <el-table-column align="center" prop="operator_username" label="经办人">
              </el-table-column>
             
              <!-- <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                  <span class="canceloff-btn" @click="Newwine(scope.row)" v-if="scope.row.inType == '新酒入库'">查看</span>
                  <span class="canceloff-btn" @click="transfer(scope.row)"v-if="scope.row.inType == '转让入库'">查看</span>
                </template>
              </el-table-column> -->
            </el-table>
           
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10,20,30,50,100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
          </div>

        </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                startTime:'',
                endTime:'',
                // goodsId:'',
                storeId:'',
                inType:''
              },
              selectedOptions:[],
              // goodsCates: {
              //   show: false,
              //   tableData: [{}]
              // },
              tableData: [{}],
              
              endtime:'',
              page: {
                pageSize: 10,
                current: 1,
                total: 100
              },
              numSku:this.$route.params.sku == 'num'?'':this.$route.params.sku
            };
          },
          mounted () {
            console.log(this.$route.params.sku)
            this.area();
            this.tableList();
          },
          methods: {
               //初始化数据
          async tableList() {
            try {
                let { data } = await this.$post({
                    api: "/show/instore/detail",
                    data:{
                      current:this.page.current,
                      pageSize:this.page.pageSize,
                      startTime:this.queryData.startTime,
                      endTime:this.queryData.endTime,
                      goodsId:this.queryData.goodsId || this.numSku,
                      storeId:this.queryData.storeId,
                      inType:this.queryData.inType,
                    }
                  });
                  if (data.code === 0) {
                    this.tableData = data.data;
                    this.page.total = data.rdPage.total;
                    // this.page.total = data.rdPage.total;
                    // console.log(data)
                    // this.rawList = data.data;
                  } else {
                    this.$message({
                      type: "error",
                      message: data.msg
                    });
                  }
                } catch (e) {
                  this.$message({
                    type: "error",
                    message: "接口报错"
                  });
                }
            },
            //仓库
           async area() {
              try {
                let { data } = await this.$post({
                  api: "/show/store/area"
                  
                });
                if (data.code === 0) {
                  this.selectedOptions = data.data;
                console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //导出
           async exceldetail() {
              try {
                let { data } = await this.$post({
                  api: "/import/instore/detail",
                  data:{
                    current:this.page.current,
                    pageSize:this.page.pageSize,
                    startTime:this.queryData.startTime,
                    endTime:this.queryData.endTime,
                    goodsId:this.queryData.goodsId,
                    storeId:this.queryData.storeId,
                    inType:this.queryData.inType,
                  }
                  
                });
                if (data.code === 0) {
                  let urlstr = url+data.data.replace('static/','');
                window.location.href=urlstr
                  console.log(data)
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
            //查询
            query() {
              this.tableList();
             },
            //导出
            exportData(){
              this.$confirm("确定将导出记录，您确定要导出吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.exceldetail();
                // this.$message({
                //   type: "success",
                //   message: "导出成功!"
                // });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消导出"
                });
              });
            },
          
            handleCurrentChange(val) {
              this.page.current = val;
               this.tableList();
              console.log(val);
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.tableList();
            },
            showCateDialog() {
              this.goodsCates.show = true;
            },
            //时间选择器
            changeTime(arr){
              console.log(arr)
              if(arr != null){
                this.queryData.startTime = arr[0];
                this.queryData.endTime = arr[1];
              }
              
            },
            //新酒入库
            Newwine(row){
                
              this.$router.push('/detailsofnewwine/'+row.sku_no)
              // console.log(22)
            },
            //转让入库
            transfer(row){
               
              this.$router.push('/Outofthewarehouse/'+row.sku_no)
              // console.log(33)
            },
            returnOver(){
              this.$router.go(-1);
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>